<template>
	<view class="content">
		<u-navbar
		:autoBack="true"
		:leftIconColor="tksetting.titlecolor" :bgColor="tksetting.color" :titleStyle="{color:tksetting.titlecolor}" :title="title"  :placeholder="true">
		</u-navbar>
		<u--form
			labelPosition="left"
			:model="model1"
			:rules="rules"
			ref="uForm"
		>
		
		<u-form-item
			label="姓名"
			prop="name"
			borderBottom
			labelWidth="80"
			ref="item1"
		>
		<u--input
				v-model="model1.name"
				border="none"
		></u--input>
		</u-form-item>
		<u-form-item
			label="电话"
			prop="tel"
			borderBottom
			labelWidth="80"
			ref="item1"
		>
		<u--input
				v-model="model1.tel"
				border="none"
		></u--input>
		</u-form-item>
		
		<u-form-item
			label="省市区"
			prop="add"
			labelWidth="80"
			borderBottom
		>
			<u--input
				v-model="model1.add"
				border="none"
				:readonly="true"
				placeholder="请选择地址"
			></u--input>
			<u-button
				slot="right"
				@tap="onPickAddress"
				text="选择地址"
				icon="map"
				
				size="mini"
			></u-button>
		</u-form-item>
		
		<u-form-item
			label="详情"
			prop="adds"
			borderBottom
			labelWidth="80"
			ref="item1"
		>
		<u--input
			v-model="model1.adds"
			border="none"
		></u--input>
		</u-form-item>
		
		<u-form-item
			label="默认地址"
			prop="default"
			borderBottom
			labelWidth="80"
			ref="item1"
		>
			<u-radio-group v-model="model1.default">
				<u-radio
					:customStyle="{marginRight: '16px'}"
					check
					label="是"
					name="1"
				>
				</u-radio>
				<u-radio
					:customStyle="{marginRight: '16px'}"
					label="否"
					name="0"
				>
				</u-radio>
			</u-radio-group>
		</u-form-item>
		
		
		<u-gap height="12"></u-gap>
		<u-button :color="tksetting.color" text="新增" @click="submit"></u-button>
		</u--form>
		<pick-adress ref="pickAdress" @confirm="handleConfirm"></pick-adress>		
	</view>
</template>
<script>
import pickAdress from './components/john-pickAddress/pickAddress'	
import {toast, clearStorageSync, setStorageSync, getStorageSync, useRouter} from '@/utils/utils.js'
import { mapState } from 'vuex';
export default {
	data() {
		return {
			title:'新增地址',
			showSex: false,
			model1:{
				name: '',
				tel: '',
				add: '',
				adds: '',
				default: "1"
			},
			rules: {
				'name': {
					type: 'string',
					required: true,
					message: '请填写姓名',
					trigger: ['blur', 'change']
				},
				'tel': {
					type: 'string',
					required: true,
					message: '请输入联系号码',
					trigger: ['blur', 'change']
				},
				'add': {
					type: 'string',
					required: true,
					message: '请选择省市区',
					trigger: ['blur', 'change']
				},
				'adds': {
					type: 'string',
					required: true,
					message: '请填写详细地址',
					trigger: ['blur', 'change']
				}
			}
			
		}
	},
	onLoad(op) {
		//this.id  = op.id
	},
	onShow() {
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules)
	},
	computed: {
		...mapState(['tksetting'])
	},
	components: {
		pickAdress
	},
	methods: {
		onPickAddress() {
			this.$refs.pickAdress.onOpen()
		},
		change(e) {
			this.model1.default = e;
		},
		handleConfirm(selectedData) {
			//console.log('选中的地址信息:', selectedData);
			// 在这里你可以访问到选中的省市区信息
			const {
				province,
				city,
				district
			} = selectedData;
			//console.log(`省：${province.name}, 市：${city.name}, 区：${district.name}`);
			//let pages = getCurrentPages();
			//let prevPage = pages[pages.length - 2];
			this.model1.add = `${province.name}省${city.name}市${district.name}`;
			//prevPage.$vm.adds = `省：${province.name}, 市：${city.name}, 区：${district.name}`
			//this.$router.back();
		},
		submit() {
				this.$refs.uForm.validate().then(res => {
					//console.log(this.model1)
					this.$api.add_useradd(this.model1).then(re => {
						let pages = getCurrentPages();
						let prevPage = pages[pages.length - 2];
						prevPage.$vm.init();
						//uni.$emit('refresh',res);
						uni.navigateBack();
					
					});
					
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
		}
	}
}
</script>
<style lang="scss" scoped>
	.content{padding: 24rpx;}
</style>